<template>
    <div class="group2">
      <div class="grid-box">
            <template v-for="item in props.slist" :key="item.id">
                <slot name="gridBoxItem" :item></slot>
            </template>
      </div>    
        <hr>
        <p>这是我的父组件给我的吃的{{ props.chide }}</p>
        <hr>
        <SonSonDemo1 :chide2="props.chide"></SonSonDemo1>
  </div>   
</template>

<script lang="ts" setup>
import { watchEffect } from 'vue'
import { type IDdemoList } from "@/service/types/scu24Types";
import SonSonDemo1 from "./SonSonDemo1.vue";
const props=defineProps<{
    slist:IDdemoList[]
    chide:string
}>()
watchEffect(()=>{
    console.log(props.slist);
    
})
</script>

<style lang="scss">
.group2 {
  border: 2px solid rgb(111, 203, 50);
  margin: 10px;
  padding: 10px;
}

/* #region  网格布局 */

.grid-box {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.grid-box-item {
  border-radius: 5px;
  cursor: pointer;
}
</style>